<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"
      xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>意向客户列表</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-store, must-revalidate">
    <meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT">
    <meta http-equiv="expires" content="-1">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
          name="viewport">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="/dist/img/icon.png" type="image/x-icon">
    <!-- Bootstrap 3.3.6 -->
    <link rel="stylesheet" href="/dist/plugins/bootstrap/css/bootstrap.min.css">
    <!--字体-->
    <link rel="stylesheet" href="/dist/css/font-awesome.min.css">
    <!--图标-->
    <link rel="stylesheet" href="/dist/css/ionicons.min.css">
    <!--插件样式-->
    <link rel="stylesheet" href="/dist/plugins/select2/select2.min.css">
    <link href="/dist/plugins/ztree/css/zTreeStyle/zTreeStyle.css" rel="stylesheet"/>
    <link rel="stylesheet" href="/dist/plugins/webuploader-0.1.5/webuploader.css">
    <!--OA主样式-->
    <link rel="stylesheet" href="/dist/css/OA.min.css?t=39cd89cd">
    <link rel="stylesheet" href="/dist/css/skins/OA-skins.min.css?t=16f1e6f3">
    <style>
        .webuploader-pick {
            padding: 3px 0;
            padding-left: 15px;
            background: none;
        }

        .left {
            width: 180px;
            float: left;
        }

        .right {
            margin-left: 190px;
        }

        .lineF span {
            max-height: 140px;
            line-height: 20px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 7;
            text-align: left;
        }

        .lineOne {
            text-align: left;
        }

        .lineOne span {
            max-height: 20px;
            line-height: 20px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            text-align: left;
        }

        .div-td-content-more {
            position: absolute;
            height: auto;
            z-index: 999;
            line-height: 20px;
            background-color: #d3e8fd;
            padding: 8px 6px;
            border: 1px solid #e8e8ea;
            display: none;
        }

        .div-td-content-more i {
            width: 15px;
            height: 12px;
            background: url("/dist/img/more-icon.png");
            position: absolute;
            left: 50px;
            top: -12px;
        }

        .moduleName {
            float: left;
            height: 27px;
            line-height: 27px;
            font-size: 22px;
            width: 100px;
            text-align: center;
        }

        .tryStyle {
            width: 30px;
            height: 14px;
            line-height: 14px;
            font-size: 12px;
            /* top: 0; */
            right: 0;
            position: absolute;
            border-radius: 5px;
            margin-top: 1px;
            background: red;
            color: #fff;
            margin-right: -2px;
            transform: scale(0.8);
        }

        .nav-tabs-custom {
            padding: 10px;
            margin-bottom: 0;
            box-shadow: none;
            position: relative;
            overflow: hidden;
        }

        .infoReport {
            display: flex;
            justify-content: flex-start;
            text-align: left;
            margin-left: 10px;
        }

        .infoReport div {
            margin: 0 10px;
        }

        .lineOne {
            text-align: left;
        }

        .lineOne span {
            max-height: 20px;
            line-height: 20px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            text-align: left;
        }

        .lineOneNoMore {
            text-align: left;
        }

        .lineOneNoMore span {
            max-height: 20px;
            line-height: 20px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            text-align: left;
        }

        .mScrollBox {
            float: left;
            position: relative;
        }

        .imgStyle {
            width: 300px;
            height: 400px;
        }

        .div-td-content-more {
            position: absolute;
            height: auto;
            z-index: 999;
            line-height: 20px;
            background-color: #d3e8fd;
            padding: 8px 6px;
            border: 1px solid #e8e8ea;
            display: none;
        }

        .div-td-content-more i {
            width: 15px;
            height: 12px;
            background: url("/dist/img/more-icon.png");
            position: absolute;
            left: 50px;
            top: -12px;
        }

        .templateStyle {
            border: 1px solid #ddd;
        }

        .table > thead > tr > th {
            padding: 0;
        }

        .table > tbody > tr > td {
            position: relative;
        }

        .table > tbody > tr > td {
            height: 30px;
            max-height: 28px;
            overflow: hidden;
        }

        .jiaobiao3 {
            position: relative;
        }

        .jiaobiao3 i {
            display: block;
            width: 6px;
            height: 6px;
            background: url("/dist/img/newLog3.png");
            position: absolute;
            top: 0px;
            right: 0px;
        }
    </style>
</head>
<body>
<section class="content" id="app" v-cloak>
    <div class="div-td-content-more"><i></i></div>
    <iframe id="ifExprot" style="width:0px;height:0px;display: none;" frameborder="0"></iframe>
    <div>
        <div class="row">

            <div >
                <div class="templateStyle iframeH2" style="overflow-y: auto;">
                    <div style="    margin: 10px;height: 25px;">
                        <input type="text" placeholder="关键字" class="form-control pull-left input-sm"
                               style="width: 165px;"
                               v-model="key">
                        <button type="button" class="btn oaBtn btn-sm pull-left"
                                style="margin-left: 10px;height: 25px;"
                                @click="get_customerList_regionList">查询
                        </button>

                    </div>
                    <div style="padding: 0 10px;background: #fff;" id="customersGroup">
                        <div style="width: 100%;" class="mScrollBox">
                            <table class="table table-hover table-bordered text-center table-striped">
                                <thead>
                                <tr>
                                    <th style="width: 27px;">序号</th>
                                    <th style="width: 56px;">区域经理</th>
                                    <th style="width: 51px;">客户姓名</th>
                                    <th style="width: 91px;">客户电话</th>
                                    <th style="width: 64px;">客户类型</th>
                                    <th style="width: 50px;">客户信用</th>
                                    <th style="width: 85px;">客户所在地</th>
                                    <th style="width: 55px;">购买时间</th>
                                    <th style="width: 60px;">意向机型</th>
                                    <th style="width: 55px;">购买方式</th>
                                    <th style="width: 75px;">本月成交概率</th>
                                    <th style="width: 96px;">商机确认日期</th>
                                    <th> 基本情况</th>
                                </tr>
                                </thead>
                                <tbody>
                                <template v-if="customerList.length>0">
                                    <tr v-for="(item,i) in customerList">
                                        <td>{{i+1}}</td>
                                        <td>{{item.createUserName}}</td>
                                        <td @click="goDetail(item.customerId,0,'look',0)" >
                                            <i></i><span
                                                style="text-align:center;color:#169BD5;cursor: pointer; ">{{item.customerName}}</span>
                                        </td>
                                        <td>{{item.tel}}</td>
                                        <td>{{item.customerType}}</td>
                                        <td>{{item.customerCredit}}</td>
                                        <td class='td-tanZongStyle-line'>
                                            <span class="lineOne" style="text-align: center;max-height: 24px">{{item.provinceName}}-{{item.cityName}}-{{item.countyName}}</span>
                                        </td>
                                        <td>{{item.buyDate}}</td>
                                        <td>{{item.intentionModel}}</td>
                                        <td>{{item.buyType}}</td>
                                        <td>
                                            {{item.chance}}
                                        </td>
                                        <td>{{item.businessDate}}</td>
                                        <td class="lineOne"><span>{{item.otherCondition}}</span></td>
                                    </tr>
                                </template>
                                <template v-else>
                                    <tr>
                                        <td colspan="13">暂无数据</td>
                                    </tr>
                                </template>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<script src="https://file.ggxqce.com/web/jquery-2.2.3.min.js"></script>
<!--插件JS-->
<script src="https://file.ggxqce.com/web/bootstrap.min.js"></script>
<!--框架已定义 JS-->
<script src="/dist/js/app_iframe.js?t=8e743a31"></script>
<!--oa自定义  JS-->
<script src="/dist/js/oa.js?t=54c6b89c"></script>
<script src="https://file.ggxqce.com/web/vue.min.js"></script>
<script type="text/javascript" src="/dist/plugins/My97DatePicker/WdatePicker.js"></script>
<script type="text/javascript" src="/dist/plugins/lhgdialog/lhgdialog.min.js?self=true"></script>
<script src="/dist/plugins/webuploader-0.1.5/webuploader.min.js"></script>
<script type="text/javascript">
    function refresh() {
        app.get_customerList_regionList();
    }
    $(function () {
        $("body").on("click", ".lineOne,.lineTwo,.lineF", function (e) {
            if ($(".div-td-content-more").is(":hidden")) {
                var text = $(this).text();
                if (text != "") {
                    text = "<i></i>" + text;
                    $(".div-td-content-more").html(text).css({
                        "width": $(this).outerWidth() + "px",
                        "left": $(this).offset().left,
                        "top": ($(this).offset().top + $(this).outerHeight()) + "px"
                    }).show();
                    e.stopPropagation();
                }
            } else {
                $(".div-td-content-more").hide();
            }
        });
        $("body").on("click", ".div-td-content-more", function (e) {
            e.stopPropagation();
        });
        $("body").on("click", function () {
            $(".div-td-content-more").hide();
        });
    });

    var app = new Vue({
        el: '#app',
        data: {
            userId: $.wyui.page.urlParams.userId,
            key: '',
            departName:$.wyui.page.urlParams.departName,
            regionId:$.wyui.page.urlParams.regionId,
            buyDate: $.wyui.page.urlParams.buyDate,
            customerList: [],
            returnFlag: false,
        },
        watch: {
            isCheckedAll: function (isCheck) {
                this.isCheckNew = isCheck;
                if (isCheck) {
                    for (var i = 0; i < this.customerList.length; i++) {
                        var item = this.customerList[i];
                        item.checked = this.isCheckedAll;
                        this.selectIds.push(item.customerId);
                    }

                } else {
                    this.selectIds = [];
                    for (var i = 0; i < this.customerList.length; i++) {
                        var item = this.customerList[i];
                        item.checked = this.isCheckedAll;
                    }
                }
            }
        },
        methods: {
            get_customerList_regionList: function () {
                var that = this;
                $.wyui.postMethod('/intentionCustomerManagement/getIntentCustomerListByRegionId.json', {
                    "regionId": that.regionId,
                    "buyDate": that.buyDate,
                    "key": that.key
                }, function (data) {
                    console.log(data.records)
                    that.customerList = data.records;
                    that.returnFlag = true;
                });
            },

            goDetail: function (customerId, createUserId, pageType, isAdd) {
                var that = this;
                var H = $(window).height() - 50;
                if (!((createUserId) == (getCurrentUser().id))) {
                    pageType = 'look';
                }
                $.dialog({
                    content: 'url:/page/intentionManagement/intentCustomerPc/quYuIntentionalDetail.html?pageType=' + pageType + "&customerId=" + customerId + "&userId=" + getCurrentUser().id + "&isAdd=" + isAdd,
                    title: '意向客户详情',
                    width: 400,
                    height: H,
                    max: true,
                    min: true,
                    lock: true
                });
            },

            //合并单元格
            tablesMergeCell: function (list) {
                for (field in list[0]) {
                    var k = 0;
                    while (k < list.length) {
                        list[k][field + 'span'] = 1;
                        list[k][field + 'dis'] = false;
                        for (var i = k + 1; i <= list.length - 1; i++) {
                            if (list[k][field] == list[i][field] && list[k][field] != '') {
                                list[k][field + 'span']++;
                                list[k][field + 'dis'] = false;
                                list[i][field + 'span'] = 1;
                                list[i][field + 'dis'] = true;
                            } else {
                                break;
                            }
                        }
                        k = i;
                    }
                }
                return list;
            },
            //获取合计
            getCount: function (arr, key) {
                var number = 0;
                for (var i = arr.length - 1; i >= 0; i--) {
                    number += (arr[i][key] && arr[i][key] != '-' ? arr[i][key] : 0)

                }
                return number;
            },

            isHasRightOp: function (regionId) {
                //console.log($.inArray(regionId, this.reginIds) > -1)
                return $.inArray(regionId, this.reginIds) > -1;
            },

            isArray: function (id) {
                var that = this;
                if ($.inArray(id, that.selectIds) > -1) {
                    // 如果已经包含了该id, 则去除(单选按钮由选中变为非选中状态)
                    return true;
                } else {
                    // 选中该checkbox
                    return false;
                }
            },

        },
        mounted: function () {
            var that = this;
            that.get_customerList_regionList();

        }
    });
</script>
</body>
</html>